<template>
	<view>
		<u-keyboard :tooltip="false" :mask="false"  @change="valChange" @backspace="backspace" mode="car" v-model="show"></u-keyboard>
	<view class="formModel">
		<view class="cu-form-group">
			<view class="title">运输车辆车牌号</view>
			<input  :style="show==true?cursor:''" disabled="true"  @tap="showKeyboard(true)" v-model="value" placeholder="请输入车牌号" focus='true' name="input"></input>
		</view>
		<view class="cu-form-group">
			<view class="title">车辆所属机构</view>
			<input v-model="equipment_affiliate" placeholder="请输入机构" focus='true' name="input"></input>
		</view>
		<view class="cu-form-group">
			<view class="title">运输类型</view>
			<input v-model="transport_type" placeholder="请输入运输类型" focus='true' name="input"></input>
		</view>
		<view class="cu-form-group">
			<view class="title">车辆类型</view>
			<input v-model="vehicle_type" placeholder="请输入车辆类型" focus='true' name="input"></input>
		</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgList: [],
				num:0,
				licensePlate:"",
				hasLocation: false,
				location: {},
				locationAddress: '',
				//表单提交数据
				license_plate:'',//运输车辆车牌号
				equipment_affiliate:'',//车辆所属机构
				transport_type:'',//运输类型
				vehicle_type:'',//车辆类型
				//自定义键盘
				value: '',
				show:false,
				cursor:'padding: 5rpx;background-color: #f1f1f1; height:50rpx;line-height:50rpx;'
			};
		},
		watch:{
		value(val){
			var _reg = /^\S{0,7}$/;
			if (!_reg.test(val)) {
			         uni.showToast({
			         	icon:"none",
						title:"车牌长度最长七位！"
			         })
				let num = val.length - 7;
				console.log(num)
				if(num>0){
					this.value = this.value.substr(0, this.value.length - num);
				}
			 }
		}	
		},
		onNavigationBarButtonTap(){
			//提交数据
			this.addNewCar()
		},
		onReady() {
			
		},
		methods:{
			//显示键盘
			showKeyboard(bool){
				this.show = bool;
			},
			// 按键被点击(点击退格键不会触发此事件)
			valChange(val) {
				// 将每次按键的值拼接到value变量中，注意+=写法
				this.value += val;
				console.log(this.value);
			},
			// 退格键被点击
			backspace() {
				// 删除value的最后一个字符
				if(this.value.length) this.value = this.value.substr(0, this.value.length - 1);
				console.log(this.value);
			},
			//车辆备案
			addNewCar(){
				uni.showLoading({
					title:"添加中"
				})
				uni.request({
					url:this.confige.webUrl+"/filing/CarInfoAdd",
					data:{
						equipment_affiliate:this.equipment_affiliate,
						license_plate:this.value,
						transport_type:this.transport_type,
						vehicle_type:this.vehicle_type
					},
					method:"POST",
					header:{
						'X-Token':this.User.token
					},
					success: (res) => {
						console.log(res);
						uni.hideLoading()
						if(res.data.code==200){
							uni.showModal({
								title:"提示",
								content:"添加成功",
								showCancel:false,
								success: (res) => {
									if(res.confirm){
										uni.redirectTo({
											url:"carNumList"
										})
									}
								}
							})
						}
						if(res.data.code==400){
							uni.showToast({
								icon:"none",
								title:res.data.message
							})
						}
					}
				})
			}
			
		}
	}
</script>

<style lang="less" scoped>
	@import "../../../common/global.less";
	@import "../../../common/main.css";
	@import "../../../common/colorui/icon.css";
	.formModel{
	background-color:@backcolorthree;
	border-bottom:2rpx solid #eaeaea;
	.cu-form-group {
	.title {min-width: calc(4em + 15px);}		
	}
	}
	.bottomButModel{ 
		width: 100%;
		>button{ 
		 float:right;
		 margin-top: 20rpx;
		 margin-right: 20rpx;
		 font-size: 30rpx;
		 width: 150rpx;
		 
		 border-radius: 50rpx;
		 border: 1rpx solid #000000;
		 }
	}
	.imageUp{ 
		
	border-top: 2rpx solid #ececec;
	}
	.centerFlexLayout{  
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	}
	
</style>
